<template>
  <el-icon class="file-type-icon" :color="getFileColor(file)">
    <component :is="getFileIcon(file)" />
  </el-icon>
</template>

<script setup>
import {
  Document,
  Folder,
  Picture,
  UploadFilled,
  VideoPlay,
  Notebook,
  DocumentChecked
} from '@element-plus/icons-vue'

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
})

// 文件图标映射
const getFileIcon = (file) => {
  if (['folder'].includes(file.fileType)) return Folder
  if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(file.fileType)) return Document
  if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file.fileType)) return Picture
  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(file.fileType)) return UploadFilled
  if (['mp4', 'avi', 'mov', 'mkv'].includes(file.fileType)) return VideoPlay
  if (['txt', 'md', 'log'].includes(file.fileType)) return Notebook
  if (['pdf'].includes(file.fileType)) return DocumentChecked
  return Document
}

// 文件颜色映射
const getFileColor = (file) => {
  if (['folder'].includes(file.fileType)) return '#409EFF'
  if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(file.fileType)) return '#1890ff'
  if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file.fileType)) return '#67c23a'
  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(file.fileType)) return '#e6a23c'
  if (['mp3', 'wav', 'flac', 'aac'].includes(file.fileType)) return '#f759ab'
  if (['txt', 'md', 'log'].includes(file.fileType)) return '#73d13d'
  if (['pdf'].includes(file.fileType)) return '#f5222d'
  return '#909399'
}
</script>

<style scoped>
.file-type-icon {
          font-size: 48px;
          margin: 0 auto;
          display: block;
        }
</style>